<template>
  <page-layout>
    <a-button type="primary" class="editable-add-btn" @click="handleAdd">新增</a-button>
    <a-table bordered :columns="columns" :data-source="dataSource" :pagination="pagination" rowKey="id" ref="tableRef">
      <template #operation="{ record }">
        <div style="width: 100px;">
          <span class="editable-row-operations">
            <a @click="edit(record.id)">编辑</a>
          </span>
          <a-popconfirm
            v-if="dataSource.length"
            title="确定删除吗？"
            @confirm="onDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <save-or-edit :visible="state.visibleSaveOrEdit" @close="closeSaveOrEdit" :record="state.recordSaveOrEdit"></save-or-edit>
  </page-layout>
</template>
<script>
  import {reactive, ref, h} from 'vue';
  import {page, remove} from '@/api/module/xmys_frys';
  import {message} from "ant-design-vue";
  import saveOrEdit from "@/view/yanshou/frys/saveOrEdit";

  var state;
  const removeKey = "remove";

  export default {
    components: {saveOrEdit},
    setup() {
      const tableRef = ref()
      /// 列配置
      const columns = [
        { dataIndex: "fenbuyanshou", key: "fenbuyanshou", title: "分部工程验收资料", },
        { dataIndex: "danweiyanshou", key: "danweiyanshou", title: "单位工程验收资料", },
        { dataIndex: "hetongyanshou", key: "hetongyanshou", title: "合同工程完工验收资料", },
        { dataIndex: "qita", key: "qita", title: "其他资料", },
        { dataIndex: "operation", key: 'operation', title: '操作', width: 100, slots: {customRender: 'operation',},},
      ];

      const dataSource = ref([]);
      page({}).then((response) => {
        dataSource.value = response.data.record;
      });

      /// 分页参数
      const pagination = {
        pageNum: 1,
        pageSize: 10,
      }

      /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
      state = reactive({
        param: {},
        visibleSaveOrEdit: false,
        recordSaveOrEdit: {},
      })

      const handleAdd = () => {
        state.visibleSaveOrEdit = true
      }

      const onDelete = key => {
        dataSource.value = dataSource.value.filter(item => item.id !== key);
        remove({"id": key}).then((response) => {
          if(response.success){
            message.success({content: "删除成功", key: removeKey, duration: 1})
          } else {
            message.error({content: "删除失败", key: removeKey, duration: 1})
          }
        })
      };

      const edit = (id) => {
        console.log(id)
      }

      /// 关闭修改
      const closeSaveOrEdit = function(){
        state.visibleSaveOrEdit = false;
        tableRef.value.reload();
      }

      return {
        state,
        tableRef,
        columns,
        dataSource,
        pagination,

        handleAdd,
        onDelete,
        edit,

        closeSaveOrEdit,
      }
    }
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
